<div data-role="view" data-init="mobileListViewPullWithEndless" data-title="Pull to refresh" data-layout="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>

    <ul id="pull-with-endless"></ul>
    
<script id="pull-with-endless-template" type="text/x-kendo-template">
    <div class="tweet">
        <img class="pullImage"  alt="#= productName #" />#= productName #
        <div class="metadata">
            <a class="sublink" target="_blank" href="http://twitter.com/\\#!/#= productName #/status/#= productName #" data-rel="external" rel="nofollow">#= productName #</a>
            |
            <a class="sublink" href="http://twitter.com/#= productName #" rel="nofollow" data-rel="external">#= productName #</a>
        </div>
    </div>
</script>

<script>
    var maxIdRegExp = /max_id=\d*/,
        sinceIdRegExp = /since_id=\d*/;

    function getQueryValue(queryString, regexp) {
        var value = regexp.exec(queryString);

        if (value) {
            value = value[0].split("=")[1];
        }

        return value;
    }

    function mobileListViewPullWithEndless() {
        pageNumber = 0;
    		
    		var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: {
                        url: "service/product", // the remote service url - Twitter API v1.1
                        dataType: "json" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
	                    options = {	                        
	                        size: options.pageSize
	                    };
	                    if (paged) {	                        
	                         paged = false;
	                    }
	                    else
	                    {
	                    	pageNumber = 0;
	                    	
	                    }
	                    options["page"] = pageNumber;
	                    return options;
	                }
                },
                schema: { // describe the result format
                    parse: function(response) {
	                    pageNumber = pageNumber +1;
                   
	                    return response;
	                },
                    // the data which the data source will be bound to is in the "results" field
                    data: function(data) {
                        return data || [];
                    },
                    total: function() { return 100; }
                }
            });
			paged = false;
	        $("#pull-with-endless").kendoMobileListView({
	            dataSource: dataSource,
	            pullToRefresh: true,
	            appendOnRefresh: false,
	            endlessScroll: true,
	            endlessScrollParameters: function() {	            	
	                paged = true;
	            },
	            template: $("#pull-with-endless-template").text()
	        });
    }
</script>

<style scoped>
    .tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
    }
</style>
</div>
